<template>
	<view>
		<view class="list_con u-border-bottom">
			<text class="dis_inl_blo circle"></text>
			<text style="color:#0c838b;">表单结果</text>
		</view>
		<view class="list_con list_con1 u-rela">
			<text class="u-abso pos_left">检查总结</text>
			<text :style="{color:color}" class="u-abso pos_right">{{label}}</text>
		</view>
		<view class="list_con u-border-bottom u-margin-top-20">
			<text class="dis_inl_blo circle"></text>
			<text style="color:#0c838b;">巡查管理记录</text>
		</view>
		<view class="list_con list_con1 u-border-bottom u-rela">
			<text class="u-abso pos_left">巡查设备</text>
			<text style="color:#666;" class="u-abso pos_right">{{detail.name}}</text>
		</view>
		<view class="list_con list_con1 u-border-bottom u-rela">
			<text class="u-abso pos_left">设备位置</text>
			<text style="color:#666;" class="u-abso pos_right">{{detail.address}}</text>
		</view>
		<view class="list_con list_con1 u-border-bottom u-rela" @click="show=true">
			<text class="u-abso pos_left">巡查情况</text>
			<u-select class="u-abso pos_right" v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			<text :style="{color:color}" style="right:60rpx;" class="u-abso pos_right">{{label}}</text>
			<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
		</view>
		<view>
			<view class="list_con2" v-for="(item,index) in detail.content" :key="index">
				<view style="margin-bottom:30rpx;">
					{{index+1}}、{{item.name}}
				</view>
				<view v-if="item.type==1">
					<u-radio-group
					    placement="column"
					    @change="groupChange(item.name)"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px',marginRight: '8px'}"
						  activeColor="#008987"
					      v-for="(ite, inde) in item.select"
					      :key="inde"
					      :label="ite"
					      :name="ite"
					      @change="radioChange"
					    >{{ite}}
					    </u-radio>
					</u-radio-group>
				</view>
				<view v-if="item.type==2">
					 <u-checkbox-group
						placement="column"
						@change="checkboxChange"
					>
						<u-checkbox
							:customStyle="{marginBottom: '8px'}"
							activeColor="#008987"
							v-for="(ite, inde) in item.select"
							:key="inde"
							:label="ite"
							:name="ite"
							@change="checkChange1(item.id)"
						>{{ite}}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="text_con" v-if="item.type==3">
					<textarea :name="index" cols="30" rows="6" placeholder="请输入..." :data-i="item.name" @input="inputconfirm"></textarea>
				</view>
			</view>
		</view>
		
		<view v-if="status==-1" style="margin-top:20rpx;">
			<view class="list_con u-border-bottom u-margin-top-20">
				<text class="dis_inl_blo circle"></text>
				<text style="color:#0c838b;">报修信息</text>
			</view>
			<view class="list_con list_con1 u-border-bottom u-rela">
				<text class="u-abso pos_left">维修区域</text>
				<text style="color:#666;" class="u-abso pos_right">公区</text>
			</view>
			<view class="list_con list_con1 u-border-bottom u-rela" @click="showtype=true">
				<text class="u-abso pos_left">维修类型</text>
				<u-select class="u-abso pos_right" v-model="showtype" value-name="id" label-name="name" mode="single-column" :list="types" @confirm="confirmtype"></u-select>
				<text style="right:60rpx;" class="u-abso pos_right">{{typelabel}}</text>
				<u-icon style="top:25rpx;" class="u-abso pos_right" size="30" color="#999" name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view class="list_con" style="margin-top:20rpx;">
			<text>现场图片</text>
			
			<u-upload :action="action" @on-success="successimg" @on-remove="deletePic" :file-list="fileList" maxCount="9"></u-upload>
		</view>
		<view class="list_con">
			<text>简述情况</text>
			<textarea v-model="memo" value="" placeholder="请简单描述详细情况" />
		</view>
		<button class="btn_con" @click="examinePatrol">{{subbtn}}</button>
		<view style="height:100rpx;"></view>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getPatrolDetail,
		examinePatrol,
		repair,
		getRepairType
	} from "@/service/patrolService.js";
	export default {
		data () {
			return {
				show:false,
				list: [
					{
						value: '1',
						label: '正常'
					},
					{
						value: '-1',
						label: '异常'
					}
				],
				color:'#38a253',
				detail:{
					name:'',
					address:''
				},
				subbtn:'提交',
				
				showtype:false,
				typelabel:'请选择',
				types:[],
				type:0,
				
				code:'',
				status:1,
				label:'正常',
				memo:'',
				images:[],
				fileList:[],
				action:'https://admin.gslhzhwy.com/api/upload/file',
				
				questionlist:[],
				radiovalue:'',
				checkvalue:'',
				check:0,
				questionAnswer:[],
				isselect:true   //判断问题是否有未被填的
			}
		},
		onLoad(options) {
			this.code=options.code;
			getPatrolDetail({code:options.code}).then(this.getPatrolDetail);
			getRepairType({type:1}).then(this.getRepairType);
		},
		methods:{
			getPatrolDetail(e) {
				// console.log(e)
				var that=this;
				if (e.code == 200) {
					this.detail=e.result;
					this.questionlist=e.result.content;
					var list=e.result.content;
					var obj={};
					for(var i=0;i<=list.length-1;i++){
						obj={name:list[i].name,select:''}
						that.questionAnswer.push(obj)
					}
				}
			},
			getRepairType(e){
				if(e.code==200){
					this.types=e.result;
				}
			},
			confirm(e) {
				// console.log(e);
				this.status=e[0].value;
				this.label=e[0].label;
				if(e[0].value==1){
					this.color='#38a253';
					this.subbtn='提交';
				}else{
					this.color='#b92518';
					this.subbtn='提交并报修';
				}
			},
			confirmtype(e){
				this.type=e[0].value;
				this.typelabel=e[0].label
			},
			successimg:function(e){
				if (e.code == 1) {
					this.images.push(e.data.url);
				}
			},
			// 删除图片
			deletePic(event) {
				this.images.splice(event.index,1);
			},
			groupChange(n) {
				var that=this;
				// console.log('groupChange', n);
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(this.questionAnswer[i].name==n){
						that.questionAnswer[i].select=that.radiovalue
					}
				}
				// console.log(that.questionAnswer);
			},
			radioChange(n) {
				// console.log('radioChange', n);
				this.radiovalue=n;
			},
			
			checkboxChange(n) {
				// console.log('change', n);
				if(n.length>0){
					this.checkvalue=n.join(',');
				}else{
					this.checkvalue=''
				}
				this.questionAnswer[this.check-1].select=this.checkvalue
			},
			inputconfirm(e){
				var i=e.currentTarget.dataset.i;
				// this.questionAnswer[i].select=e.detail.value;
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(this.questionAnswer[i].name==i){
						that.questionAnswer[i].select=te.detail.value
					}
				}
			},
			checkChange1(n){
				var that=this;
				// console.log('changegroup', n);
				this.check=n;
				
			},
			examinePatrol:function(){
				// console.log(this.questionAnswer);
				var that=this;
				for(var i=0;i<=this.questionAnswer.length-1;i++){
					if(that.questionAnswer[i].select==''){
						that.$refs.uToast.show({
							title: '有设备选项没有选择结果！',
							type: 'error', 
							icon: false
						})
						that.isselect=false;
						return;
					}else{
						this.isselect=true;
					}
				}
				if(this.memo==''){
					this.$refs.uToast.show({
						title: '简述情况不可为空！',
						type: 'error', 
						icon: false
					})
				}else{
					
					if(this.isselect==true){
						examinePatrol({
							code:this.code,
							memo:this.memo,
							status:this.status,
							image:this.images,
							content:JSON.stringify(this.questionAnswer)
						}).then(res=>{
							// console.log(res)
							if(res.code==200){
								this.$refs.uToast.show({
									title: '提交成功',
									type: 'success', 
									icon: false
								})
								setTimeout(function(){
									uni.navigateBack()
								},2000)
							}else{
								this.$refs.uToast.show({
									title: res.msg,
									type: 'error', 
									icon: false
								})
							}
						});
						if(this.status==-1){
							repair({
								type:this.type,
								content:this.memo,
								images:this.images,
							}).then(res=>{
								// console.log(res)
								if(res.code==200){
									this.$refs.uToast.show({
										title: '提交成功',
										type: 'success', 
										icon: false
									})
									setTimeout(function(){
										uni.navigateBack()
									},2000)
								}else{
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error', 
										icon: false
									})
								}
							});
						}
					}
					
				}
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.list_con{
		padding:20rpx;
		background-color: #fff;
	}
	.list_con1{
		height:80rpx;
	}
	.circle{
		width:15rpx;
		height:15rpx;
		margin-right:20rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #0c838b;
	}
	.list_con textarea{
		width:93%;
		height:150rpx;
		padding:20rpx;
		margin-top:10rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		border:1rpx solid #ddd;
	}
	.list_con2{
		padding:20rpx;border-top:20rpx solid #f2f2f2;
		background-color: #fff;
	}
	
	.text_con{
		textarea{
			width:94%;
			padding:20rpx;
			border-radius: 15rpx;
			background-color: #f8f8f8;
		}
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff;
		margin:70rpx auto 20rpx;
	}
	
	.pre-box {
		margin-top:20rpx;
	}
	
	.pre-item {
		// flex: 1;
		display: inline-block;
		border-radius: 10rpx;
		width:200rpx;
		height: 200rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
		margin-left:10rpx;
	}
	
	.pre-item-image {
		width: 100%;
		height: 100%;
	}
</style>
